<script setup lang="ts">
import { defineComponent, nextTick, onMounted, ref } from 'vue';
import type { TabsPaneContext } from 'element-plus'
import axios from 'axios';
import '@/mock/DMAmock'
import LeakageCom1 from '@/components/DMA/LeakageCom1.vue';
import LeakageCom2 from '@/components/DMA/LeakageCom2.vue';
import LeakageRateCom1 from '@/components/DMA/LeakageRateCom1.vue';
import LeakageRateCom2 from '@/components/DMA/LeakageRateCom2.vue';
import { log } from 'console';



const service = axios.create({
    baseURL: '/',
    timeout: 60000,
})

const dmalist: any = ref([])
const childlist: any = ref([])
const alist: any = ref([])

service.post('/api/reqdmalist').then(res => {


    dmalist.value = res.data.data.area


    dmalist.value.forEach((item: any) => {



        item.children.forEach((el: any) => {

            alist.value.push(el)

        });

    });

})

// 点击传参
const nowlist2: any = ref({
    id: 11,
    name: '',
    time1: {
        leakage: 1
    },
    time2: {
        leakage: 1
    },
    time3: {
        leakage: 1
    },
    time4: {
        leakage: 1
    },
    time5: {
        leakage: 1
    },
    time6: {
        leakage: 1
    },
    time7: {
        leakage: 1
    },
})
function rowClick(row: any) {
    nowlist2.value = row
    // console.log(nowlist2.value);
}


</script>


<template>

    <div class="first">
        <div class="first-left">
            <h1>漏损率排行榜</h1>

            <!-- 表格 -->
            <el-table @row-click="rowClick" :data="alist"
                style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all>
                <el-table-column prop="name" label="DMA分区名称" />
                <el-table-column prop="time7.water" label="供水量(m³)" sortable />
                <el-table-column prop="time7.leak" label="漏水量(m³)" sortable />
                <el-table-column prop='time7.leakage' label="漏损率(%)" sortable />
                <el-table-column prop="time7.sale" label="售水量(m³)" sortable />
                <el-table-column prop="time7.sales" label="产销率(%)" sortable />
            </el-table>

        </div>
        <div class="first-right">
            <h1>漏损产销差统计</h1>
            <div class="leakbox">
                <div class="leak-left">
                    <h1>漏损率(%)</h1>
                    <LeakageCom1 :propmsg="nowlist2"></LeakageCom1>
                </div>
                <div class="leak-right">
                    <h1>产销差率(%)</h1>
                    <LeakageCom2 :propmsg="nowlist2"></LeakageCom2>
                </div>
            </div>

            <div class="leakrate">
                <h1>漏损率变化曲线(%)</h1>
                <LeakageRateCom1 :propmsg="nowlist2"></LeakageRateCom1>
            </div>

            <div class="prorate">
                <h1>产销差率变化曲线(%)</h1>
                <LeakageRateCom2 :propmsg="nowlist2"></LeakageRateCom2>
            </div>

        </div>
    </div>

</template>


<style scoped lang="scss">


.first {
    width: 100%;
    display: flex;

    h1 {
        font-size: 15px;
        color: #575757;
        margin: 0;
        margin-bottom: 10px;
    }

    .first-left {
        width: 60%;
    }

    .first-right {
        width: 40%;
        padding-left: 10px;

        .leakbox {
            width: 100%;
            height: 200px;
            display: flex;
            padding: 20px;
            background-color: #fff;
            margin-bottom: 10px;

            .leak-left {
                width: 50%;
                margin: 0 auto;
                // height: 100px;
            }

            .leak-right {
                width: 50%;
                // height: 100px;
            }
        }

        .leakrate {
            width: 100%;
            height: 350px;
            padding: 20px;
            background-color: #fff;

            #ratemain {
                overflow: auto;
            }
        }

        .prorate {
            width: 100%;
            height: 350px;
            padding: 20px;
            background-color: #fff;

            #ratemain2 {
                overflow: auto;
            }
        }
    }
}
</style>
